<template>
    <div class="container">
        <el-form :model="equipmentInfo" :rules="rules" ref="equipmentInfo" label-width="100px" class="demo-ruleForm">
            <el-form-item label="设备名称" prop="name">
                <el-input v-model="equipmentInfo.equipmentname"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="region">
                <el-select v-model="equipmentInfo.equipmenttype" placeholder="设备类型" class="handle-select mr10" @change="filterEquipment_type">
                    <el-option v-for="(type,index) in $store.state.filterEquipment_type" :key="index" :label="type" :value="type"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运行状态" prop="region2" >
                <el-select  v-model="equipmentInfo.alarmtype" placeholder="请选择运行状态" @change="filterEquipment_status">
                    <el-option v-for="(type,index) in $store.state.filterEquipment_alarm" :key="index" :label="type" :value="type"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="经度" prop="type">
                <el-input v-model="equipmentInfo.longtitude"></el-input>
            </el-form-item>
            <el-form-item label="纬度" prop="type2">
                <el-input v-model="equipmentInfo.latitude"></el-input>
            </el-form-item>
            <el-form-item label="连接类型" prop="region3">
                <el-select v-model="equipmentInfo.linktype" placeholder="请选择连接类型" @change="filterEquipment_link">
                    <el-option v-for="(type,index) in $store.state.filterEquipment_link" :key="index" :label="type" :value="type"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="维护端口" prop="resource">
                <el-input v-model="equipmentInfo.maintainport"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="resource">
                <el-input v-model="equipmentInfo.address"></el-input>
            </el-form-item>
            <el-form-item label="上次维修ID" prop="desc">
                <el-input v-model="equipmentInfo.lastmaintainuid"></el-input>
            </el-form-item>
            <el-form-item label="维修时间">
                <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker
                          v-model="equipmentInfo.lastmaintaintime"
                          type="datetime" style="width: 100%;"
                          placeholder="选择日期时间"
                          format="yyyy-MM-dd hh:mm:ss"
                          value-format='yyyy-MM-dd[T]hh:mm:ss'
                          align="right"
                          :picker-options="pickerOptions">
                      </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
<!--          未完成-->
            <el-form-item label="图片上传" prop="desc">
                <el-upload
                    :auot-upload=false
                    :limit = 3
                    class="upload-demo"
                    action="http://localhost/equipmentimg/insertimg"
                    :http-request="uploadimage"
                    :show-file-list="true"
                    :file-list="fileList"
                    ref="uploadref"
                    multiple
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">jp只能上传g/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
<!--          <el-upload-->
<!--              :auto-upload="false"-->
<!--              class="upload-demo"-->
<!--              drag-->
<!--              :file-list="fileList"-->
<!--              action="http://localhost/equipmentimg/insertimg"-->
<!--              :http-request="uploadimage"-->
<!--              :show-file-list="true"-->
<!--              ref="uploadref"-->
<!--              multiple-->
<!--          >-->
<!--            <i class="el-icon-upload" />-->
<!--            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--          </el-upload>-->


            <el-form-item>
                <el-button type="primary" @click="submitForm('equipmentInfo')">立即创建</el-button>
                <el-button @click="resetForm('equipmentInfo')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import userApi from "@/api/user";

    export default {
        name: "CreateEquipment",
        data() {
            return {
              fileurl: '',
              fileList:[],
              pickerOptions: {
                shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                    picker.$emit('pick', new Date());
                  }
                }, {
                  text: '昨天',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                  }
                }, {
                  text: '一周前',
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                  }
                }]
              },
              equipmentInfo: {
                  equipmentname: '',
                  longtitude: '',
                  latitude: '',
                  alarmtype:"",
                  equipmenttype:"",
                  linktype:"",
                  address: '',
                  maintainport:'',
                  lastmaintainuid:'',
                  lastmaintaintime:'',
              },
              rules: {
                  name: [
                      { message: '请输入设备名称', trigger: 'blur' },
                      { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                  ],
                  region: [
                      { message: '请选择设备类型', trigger: 'change' }
                  ],
                  region2: [
                      { message: '请选择设备运行状态', trigger: 'change' }
                  ],
                  region3: [
                      { message: '请选择设备连接类型', trigger: 'change' }
                  ],
                  date1: [
                      { type: 'date', message: '请选择日期', trigger: 'change' }
                  ],
                  type: [
                      { message: '请输入经度', trigger: 'change' }
                  ],
                  type2: [
                      { message: '请输入纬度', trigger: 'change' }
                  ],
                  resource: [
                      { message: '请填写维修端口', trigger: 'change' }
                  ],
                  desc: [
                      { message: '请填写上次维修ID', trigger: 'blur' }
                  ]
              }
          };
        },
        methods: {
          filterEquipment_status(val){
          },
          filterEquipment_type(val){
          },
          filterEquipment_link(val){
          },

          // 创建一个设备
          submitForm(formName) {
              // let index = this.equipmentInfo.lastmaintaintime.indexOf(" ")
              // this.equipmentInfo.lastmaintaintime = this.equipmentInfo.lastmaintaintime.replace("*",  "T")
              // this.$refs[formName].validate((valid) => {
              //     if (valid) {
              //       // 创建设备基本信息
              //         userApi.create_equipment(this.equipmentInfo).then((response) => {
              //         if (response.data.flag) {
              //           this.$notify.success({
              //             title: '成功',
              //             message: response.data.message,
              //           });
              //         } else {
              //           this.$notify.error({
              //             title: '失败',
              //             message: response.data.message,
              //           });
              //         }
              //       })
              //       // 上传该设备图片
              //
              //     } else {
              //       this.$notify.error({
              //         title: '失败',
              //         message: response.data.message,
              //       });
              //     }
              // });
              this.$refs.uploadref.submit()
          },
          uploadimage(item) {
            console.log(item)
            const formData = new FormData()
            const file = item.file
            formData.append('eqId',1)
            formData.append('file', file)
            console.log(formData)
            userApi.uploadeqIM(formData).then(response => {
              console.log(response.data)
            })
          },
          // 重置创建条件
          resetForm(formName) {
            this.equipmentInfo = {}
          }
        }
    }
</script>

<style scoped>
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>

